<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${name + code}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <div th:include="fragment/navigation-bar :: bar" ></div>

    <table border="1" style="text-align:right">
        <tr>
            <td rowspan="1">名称(亿)</td>
            <td th:each="reportDate: ${reportDateList}" th:text="${reportDate}"></td>
        </tr>
        <tr th:each="data : ${dataList}">
            <td th:text="${data.item}"></td>
            <td th:each="v : ${data.value}" th:text="${v}" ></td>
        </tr>
    </table>
    <div>pe</div>
    <canvas id="peChart" width="1200" height="400"></canvas>
    <div>pb</div>
    <canvas id="pbChart" width="1200" height="400"></canvas>
</body>
<script th:src="@{/chart.js}"></script>
<script th:inline="javascript">
//pe
/*<![CDATA[*/
var peData = {
        labels: /*[[${peHistory.dateList}]]*/,
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: /*[[${peHistory.maxPeList}]]*/
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: /*[[${peHistory.minPeList}]]*/
            }
        ]
    };
/*]]>*/
var peCtx = document.getElementById("peChart").getContext("2d");
var peLineChart = new Chart(peCtx).Line(peData);

//pb
/*<![CDATA[*/
var pbData = {
        labels: /*[[${pbHistory.dateList}]]*/,
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: /*[[${pbHistory.maxPeList}]]*/
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: /*[[${pbHistory.minPeList}]]*/
            }
        ]
    };
/*]]>*/
var pbCtx = document.getElementById("pbChart").getContext("2d");
var pbLineChart = new Chart(pbCtx).Line(pbData);
</script>
</html>